<template>
	<view class="cart-container"  v-if="total !== 0">
		<!-- 商品列表的标题区域 -->
		<view class="cart-title">
			<!-- 商店的图标 -->
			<uni-icons type="shop" size="20"></uni-icons>
			<!-- 标题 -->
			<text class="cart-name">购物车</text>
		</view>

		<!-- 商品列表信息-->
		<uni-swipe-action>
			<block v-for="(goods, index) in cart" :key="index">
				<uni-swipe-action-item :right-options="options" @click="removeGoodsHandler(goods)">
					<my-goods :goods="goods" :showRadio="true" :showNum="true"
						@radio-change="radioChangeHandler" @number-change="numChangeHandler">
					</my-goods>
				</uni-swipe-action-item>
			</block>
		</uni-swipe-action>
		
		<!-- 商品的计算组件（自定义的) -->
		<my-settle></my-settle>
	</view>
	<!-- 购物车为空的时候的空白区域 -->
	<view class="empty-cart" v-else>
		<view class="cart-empty-image">
			<image src="https://s3.bmp.ovh/imgs/2022/03/9a2059728a56db5e.png"></image>
		</view>
	</view>
</template>

<script>
	import badgeMax from '@/maxins/tabbar_badge.js'
	import { mapState, mapMutations } from 'vuex'
	
	export default {
		mixins: [badgeMax],
		computed: {
			...mapState('m_cart', ['cart'])			
		},
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#C00000'
					}
				}]
			};
		},
		
		methods:{
			...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById']),
			radioChangeHandler(e) {
				this.updateGoodsState(e)
			},
			numChangeHandler(e) {
				this.updateGoodsCount(e)
			},
			
			removeGoodsHandler(goods) {
				this.removeGoodsById(goods.goods_id)
			}
		}
	}
</script>

<style lang="scss">
.cart-container {
	padding-bottom: 50px;
	background-color: #FFFFFD;
}
.cart-title {
	height: 40px;
	display: flex;
	align-items: center;
	padding-left: 5px;
	border: 1px solid #efefef;
	.cart-name {
		font-size: 14px;
		margin-left: 10px;
	}
}
.empty-cart {
	display: flex;	
	align-items: center;
	padding-top: 90px;
}
</style>
